<template>
  <view class="show-list-root">
    <view v-show="contactDatas != null && contactDatas.length > 0" class="list-container">
      <div @click.native="contactClick(item)" class="list-item" v-for="(item,index) in contactDatas" :key="index">
        <view class="list-item-image">
          <image :src="item.liaisonPic"></image>
        </view>
        <view class="list-item-text-container">
          <view class="list-item-title-container title-content">{{ item.liaisonName }}</view>
          <view class="list-item-gl">
            <view class="gl-item">
              {{ item.liaisonDistance }}公里
            </view>
            <view class="rs-item">
              共{{ item.memberCount }}人
            </view>
          </view>
          <view class="gzsh-item" v-if=" item.workTime != '暂无' && item.workTime !=null">
            <view class="gzsj-item-title">工作时间：</view>
            <view class="gzsj-item-value">{{ item.workTime }}</view>
          </view>
          <view class="dz-item ">
            <view class="dz-text">
              <i-icon class="dz-icon" size="30rpx" name="map-pin-line"></i-icon>
              {{ item.liaisonAddress }}
            </view>
          </view>

			<template v-if="item.liaisonAdminTalents !=null && item.liaisonAdminTalents.length>0">
		  
				  <view style="display: block; line-height: 30px;">
								 专业占比： 
				  </view>
				  
				  <view class="tfzb-container">
					
					
					<view class="tfzb-item" v-for="(talentItem,talentIndex) in item.liaisonAdminTalents" :key="talentIndex">
					  {{ `${talentItem.talentName}${talentItem.ratio}` }}
					</view>
				  </view>
		  
		  </template>
        </view>
      </div>
    </view>
	
    <view :style="{height: contentMinHeight + 'px'}" v-show="contactDatas == null || contactDatas.length <= 0" class="empty-container">
      <image class="empty-image" :src="`${baseFilePath}/empty.png`"></image>
      <view class="empty-txt-container">
        暂无数据
      </view>
    </view>
	
	
  </view>
</template>

<script>
import {baseFilePath} from "@/until/publicConfig";

export default {
  name: 'mapContactList',
  props: {
    contactDatas: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const {
      windowHeight
    } = uni.getSystemInfoSync()
    return {
      baseFilePath,
      contentMinHeight: windowHeight * 0.6,
    }
  },
  methods: {
    contactClick(contactInfoData) {
      this.$emit('contactClick', contactInfoData)
    }
  }
}
</script>

<style scoped>
.show-list-root {
  box-sizing: border-box;
  width: calc(100% - 60rpx);
  height: max-content;
  padding: 30rpx;
  overflow: auto;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  position: relative;
  top: -30rpx;
}

.list-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.empty-container {
  width: 100%;
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-txt-container {
  font-size: 30rpx;
  color: #5e6d82;
  line-height: 1.5em;
}

.empty-image {
  margin-bottom: 20rpx;
  height: 300rpx;
  width: 300rpx;
}

.list-item {
  padding: 30rpx 30rpx 0 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.list-item-image {
  width: 222rpx;
  height: 167rpx;
}

.list-item-image image {
  border-radius: 20rpx;
  width: 100%;
  height: 100%;
}

.list-item-text-container {
  flex: 1;
  box-sizing: border-box;
  padding: 0 18rpx;
  display: flex;
  flex-direction: column;
  border-bottom: 1rpx solid #C7C7C7;
}

.list-item-title-container {
  width: 100%;
  margin-bottom: 10rpx;
  overflow: hidden;
}

.list-item-gl, .gzsh-item, .dz-item, .tfzb-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10rpx;
}

.gl-item {
  font-weight: normal;
  font-size: 26rpx;
  color: #B90303;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-right: 32rpx;
}

.rs-item {
  font-weight: normal;
  font-size: 26rpx;
  color: #707070;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.dz-text{
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
}

.dz-icon{
  position: relative;
  top: 5rpx;
}

.gzsj-item-title, .gzsj-item-value, .dz-text {
  font-weight: normal;
  font-size: 26rpx;
  color: #707070;
  text-align: left;
  font-style: normal;
  text-transform: none;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}

.tfzb-item {
  margin-right: 9rpx;
  background: #FEDADA;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  padding: 11rpx;
  font-weight: normal;
  font-size: 22rpx;
  color: #BD0E0E;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 6rpx;
}
</style>
